<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '种植户地址表',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <PageLayout navTitle="种植户地址表" backRouteName="index" routeMethod="pushTab">
    <view class="wrap">
      <view class="add-current" @click="handleAdd">
        <text class="add-icon">+</text>
        <text class="add-text">新增种植户地址</text>
      </view>
      <z-paging
        ref="paging"
        :fixed="false"
        v-model="dataList"
        @query="queryList"
        :default-page-size="15"
      >
        <template v-for="item in dataList" :key="item.id">
          <wd-swipe-action class="list-item">
            <view class="list">
              <template v-for="(cItem, cIndex) in columns" :key="cIndex">
                <view v-if="cIndex < 3" class="box" :style="getBoxStyle">
                  <view class="field ellipsis">{{ cItem.title }}</view>
                  <view class="value cu-text-grey">{{ item[cItem.dataIndex] }}</view>
                </view>
              </template>
              <hr />
              <view class="button-group">
                <view
                  v-if="item.defaultFlag !== 'Y'"
                  class="set-default-button button"
                  @click="handleSetDefault(item)"
                >
                  设为默认
                </view>
                <view v-else class="default-button button disabled">默认地址</view>
                <view class="edit-button button" @click="handleEdit(item)">编辑</view>
                <view class="delete-button button" @click="handleAction('del', item)">删除</view>
              </view>
            </view>
          </wd-swipe-action>
        </template>
      </z-paging>
    </view>
  </PageLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { http } from '@/utils/http'
import usePageList from '../hooks/usePageList'
import { columns } from './GrowsAddressData'
defineOptions({
  name: 'GrowsAddressList',
  options: {
    styleIsolation: 'shared',
  },
})
// 分页加载配置
const { toast, router, paging, dataList, queryList } = usePageList('/seedOil/growsAddress/list')

// 样式
const getBoxStyle = computed(() => {
  return { width: 'calc(33% - 5px)' }
})

// 其他操作
const handleAction = (val, item) => {
  if (val === 'del') {
    http.delete('/seedOil/growsAddress/delete?id=' + item.id, { id: item.id }).then((res) => {
      toast.success('删除成功~')
      paging.value.reload()
    })
  }
}

// 设置为默认地址
const handleSetDefault = async (item) => {
  try {
    // 先将当前默认地址设为非默认
    const currentDefault = dataList.value.find((record) => record.defaultFlag === 'Y')
    if (currentDefault) {
      await http.post('/seedOil/growsAddress/edit', {
        ...currentDefault,
        defaultFlag: 'N',
      })
    }

    // 将选中的地址设为默认
    await http.post('/seedOil/growsAddress/edit', {
      ...item,
      defaultFlag: 'Y',
    })

    toast.success('设置默认地址成功')
    paging.value.reload()
  } catch (error) {
    toast.error('设置默认地址失败')
  }
}

// go 新增页
const handleAdd = () => {
  router.push({
    name: 'GrowsAddressForm',
  })
}

// go 编辑页
const handleEdit = (record) => {
  router.push({
    name: 'GrowsAddressForm',
    params: { dataId: record.id },
  })
}

onMounted(() => {
  // 监听刷新列表事件
  uni.$on('refreshList', () => {
    queryList(1, 10)
  })
})
</script>

<style lang="scss" scoped>
.wrap {
  height: 100%;
}
:deep(.wd-swipe-action) {
  margin: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 1.5px 1.5px 7px #ccc;
}
.list {
  padding: 10px 10px;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .box {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    .field {
      margin-bottom: 10px;
      line-height: 20px;
    }
  }
}

.button-group {
  display: flex;
  justify-content: space-around;

  .button {
    padding: 5px;
    border-radius: 20px;
    width: 30%;
    text-align: center;
  }
  .edit-button {
    background-color: #506bff;
    color: white;
  }
  .set-default-button {
    background-color: #4caf50;
    color: white;
  }
  .default-button {
    background-color: #9e9e9e;
    color: white;
  }
  .delete-button {
    background-color: rgb(255, 80, 80);
    color: white;
  }
  .disabled {
    opacity: 0.6;
  }
}
.action {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: #fff;
    &:first-child {
      background-color: #fa4350;
    }
  }
}
.add-current {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background-color: #fff;
  margin: 10px;
  box-shadow: #ccc 1.5px 1.5px 7px;
  border-radius: 10px;
  .add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #999;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 18px;
    color: #ccc;
  }
  .add-text {
    font-size: 16px;
    color: #333;
  }
}
hr {
  margin: 10px;
  height: 1px;
  border: none;
  background-color: #ccc;
}
</style>
